import React, { useState, useEffect } from 'react';
import { Spinner } from 'reactstrap';
import './Home.css';
import { Item } from './Item/Item'

export let Home = (props) => {

  //激活每日精选按钮
  const [activate, setActivate] = useState(true);
  const [hover1, setHover1] = useState(false);
  const [hover2, setHover2] = useState(false);
  const [list, setList] = useState([]);
  const [index, setIndex] = useState(0);
  const [loading, setLoading] = useState(true);
  const [nodata, setNodata] = useState(false);

  let getList = async (i) => {
    let resp = await fetch(`/api/index/getAlbumList?index=${i}&page=5`)
    if (resp.ok) {
      let data = await resp.json();
      if (data.length == 0) {
        setNodata(true);
      }
      setList([...list, ...data]);
      setLoading(false);
    }
  }
  let setrch=async()=>{
    if (props.match.params.id !== undefined) {
      let resp = await fetch(`/api/index/searchAlbumList?text=` + props.match.params.id);
      if (resp.ok) {
        let data = await resp.json();
        setNodata(true);

        setList([...list, ...data]);
        setLoading(false);
      }
    } else {
      getList(0);
    }
  }

  useEffect(() => {
    setrch();
    return () => {

    };
  }, []);
  const next = () => {
    if (!loading) {
      setLoading(true);
      setIndex(index + 1);
      getList(index + 1);
    }
  }
  return (
    <div className="content">
      <div className="main-list">
        <div className="left-content-home">

          <div className="content-list">
            {list.map(i => {
              return <Item key={i.id} data={i} />;
            })}
            {nodata ? '无更多内容' : <div className="view-more" onClick={next}>{loading ? <Spinner color="dark" /> : '加载更多'}</div>}
          </div>
        </div>
      </div>
    </div>

  );
}
